<template>
  <div>
    <el-form
      label-width="80px"
      v-if="userInfo"
    >
      <el-form-item label="用户名">
        <el-input
          v-model="userInfo.name"
          disabled
          size="small"
          style="width:100%;"
        ></el-input>
      </el-form-item>
      <el-form-item label="科室">
        <el-select
          :disabled="!editMode"
          v-model="userInfo.clientOffice"
          size="small"
          style="width:100%;"
        >
          <el-option
            v-for="item in userAttribs.office"
            :key="item"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班组">
        <el-select
          :disabled="!editMode"
          v-model="userInfo.clientGroup"
          size="small"
          style="width:100%;"
        >
          <el-option
            v-for="item in userAttribs.group"
            :key="item"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          :disabled="!editMode"
          v-model="userInfo.passwd"
          size="small"
          style="width:100%;"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="!editMode"
          size="small"
          type="primary"
          @click="editMode=true"
        >修改</el-button>
        <el-button
          v-if="editMode"
          size="small"
          @click="handleCancel"
        >取消</el-button>
        <el-button
          v-if="editMode"
          size="small"
          type="primary"
          @click="handleSave"
        >保存</el-button>

      </el-form-item>
    </el-form>
    <!-- <pre>{{userInfo}}</pre> -->
  </div>
</template>

<script>
  export default {
    name: "userInfo",
    computed: {
      userInfoRaw() { return this.$store.getters.userInfo; },
      userAttribs() { return this.$store.state.params.userAttribs; },
    },
    data() {
      return {
        userInfo: null,
        editMode: false,
      };
    },
    methods: {
      handleCancel() {
        this.userInfo = JSON.parse(JSON.stringify(this.userInfoRaw));
        this.editMode = false;
      },
      handleSave() {
        this.$store.dispatch("saveUserInfo", this.userInfo).then(() => {
          this.userInfo = JSON.parse(JSON.stringify(this.userInfoRaw));
          this.$notify.success("保存成功");
        });
        this.editMode = false;
      },
    },
    mounted() {
      this.userInfo = JSON.parse(JSON.stringify(this.userInfoRaw));
    },
  }
</script>

<style>

</style>